<template>
  <a-menu-item @click="to_path(item)" :key="item.path" v-if="!hasChild(item)">
    <component v-if="item.meta.icon" :is="item.meta.icon"></component>
    <a :href="item.meta.href" target="_blank" v-if="item.meta.is_link">
      <span v-show="collapsed === false">
        {{ item.meta.title }}
      </span>
    </a>
    <router-link :to="item.path" v-else class="a_link">{{
      item.meta.title
    }}</router-link>
  </a-menu-item>

  <a-sub-menu :key="item.path" v-else>
    <template #title>
      <component v-if="item.meta.icon" :is="item.meta.icon"></component>
      <span :to="item.path" class="a_link">{{ item.meta.title }}</span>
    </template>
    <menu-tree v-for="item1 in item.children" :key="item1.path" :item="item1">
    </menu-tree>
  </a-sub-menu>
</template>

<script>
import { useRouter } from "vue-router";
export default {
  name: "menuTree",
  props: {
    item: {
      type: Object,
    },
    show_title: {
      type: Boolean,
      default: true,
    },
    collapsed: {
      type: Boolean,
    },
  },
  setup() {
    const router = useRouter();
    const to_path = function (item) {
      if (item.meta.is_ip) {
        window.open(item.path);
      } else {
        router.push(item.path);
      }
    };
    return {
      to_path,
      onlyOneChild: {},
    };
  },
  beforeCreate() {
    this.onlyOneChild = {};
  },
  methods: {
    hasChild(item) {
      // 用于判断 路由只有一个子节点
      if (Array.isArray(item.children) && item.children.length > 0) {
        return true;
      }
      // if (Array.isArray(item.children) && item.children.length > 1) {
      //   return true;
      // } else {
      //   this.onlyOneChild = item;
      //   return false;
      // }
    },
  },
};
</script>

<style lang="scss"></style>
